<template>
  <a-modal v-model:visible="visible" title="添加事件" :footer="null">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item
        label="车牌号"
        name="liscenseNumber"
        :rules="[{ required: true, message: '车牌号不能为空!' }]"
      >
        <a-input v-model:value="formState.liscenseNumber" />
      </a-form-item>
      <a-form-item
        label="驾驶员"
        name="driver"
        :rules="[{ required: true, message: '驾驶员不能为空!' }]"
      >
        <a-input v-model:value="formState.driver" />
      </a-form-item>
      <a-form-item
        label="事件编号"
        name="driver"
        :rules="[{ required: true, message: '事件编号不能为空!' }]"
      >
        <a-input v-model:value="formState.eventNumber" />
      </a-form-item>
      <a-form-item
        name="eventType"
        label="事件类型"
        has-feedback
        :rules="[{ required: true, message: '事件类型不能为空!' }]"
      >
        <a-select
          v-model:value="formState.eventType"
          placeholder="请输入事件类型"
        >
          <a-select-option value="碰撞">碰撞</a-select-option>
          <a-select-option value="刮擦">刮擦</a-select-option>
          <a-select-option value="失火">失火</a-select-option>
          <a-select-option value="翻车">翻车</a-select-option>
          <a-select-option value="碾压">碾压</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="事件等级"
        name="eventLevel"
        :rules="[{ required: true, message: '事件等级不能为空!' }]"
      >
        <a-select
          v-model:value="formState.eventLevel"
          placeholder="请输入事件等级"
        >
          <a-select-option value="1">1</a-select-option>
          <a-select-option value="2">2</a-select-option>
          <a-select-option value="3">3</a-select-option>
          <a-select-option value="4">4</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="发生地点"
        name="event_describe"
        :rules="[{ required: true, message: '发生地点不能为空!' }]"
      >
        <a-input v-model:value="formState.event_describe" />
      </a-form-item>
      <a-form-item
        label="处理状态"
        name="event_status"
        :rules="[{ required: true, message: '处理状态不能为空!' }]"
      >
        <a-select
          v-model:value="formState.event_status"
          placeholder="请输入处理状态"
        >
          <a-select-option value="0">0</a-select-option>
          <a-select-option value="1">1</a-select-option>
          <a-select-option value="2">2</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="事发时间"
        name="eventDate"
        :rules="[{ required: true, message: '事发时间不能为空!' }]"
      >
        <a-date-picker
          v-model:value="formState.eventDate"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button :disabled="disabled" type="primary" @click="handleOk"
          >提交</a-button
        >
        <a-button style="margin-left: 10px" @click="handleCancel">
          取消
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import mitt from '@/mitt'
import { onUnmounted, ref, reactive, computed } from 'vue'
import addEvent from '@/Hooks/addEvent'
import { Point } from '@/utils/Point'
import { CreateMap } from '@/Hooks/CreateMap'
const { docLayer } = CreateMap()
const { addPointEvent, visible, positionValue } = addEvent()
const { map } = defineProps({
  map: {
    type: Object,
  },
})
const formState = reactive({
  liscenseNumber: '',
  driver: '',
  eventType: '',
  eventNumber: '',
  eventLevel: '',
  eventDate: '',
  event_describe: '',
  event_status: '',
})
const disabled = computed(() => {
  return !(
    formState.eventType &&
    formState.eventNumber &&
    formState.eventLevel &&
    formState.eventDate &&
    formState.event_describe &&
    formState.liscenseNumber &&
    formState.driver &&
    formState.event_status
  )
})
const handleOk = () => {
  visible.value = false
  let attr = [
    { key: '事件类型', value: formState.eventType, type: 'string' },
    { key: '事件编号', value: formState.eventNumber, type: 'string' },
    { key: '事件等级', value: formState.eventLevel, type: 'short' },
    { key: '发生时间', value: formState.eventDate, type: 'string' },
    { key: '发生地点', value: formState.event_describe, type: 'string' },
    { key: '车牌号', value: formState.liscenseNumber, type: 'string' },
    { key: '驾驶员', value: formState.driver, type: 'string' },
    { key: '处理状态', value: formState.event_status, type: 'short' },
  ]
  let service = { docName: 'guanggu', layerId: 2 }
  let position = positionValue._rawValue
  Point.add({
    position,
    attr,
    service,
    docLayer,
  })
  location.reload()
}
const handleCancel = () => {
  visible.value = false
}
const addPoint = () => {
  /* 创建画布 */
  const source = new ol.source.Vector({
    wrapX: false,
  })
  const layer = new ol.layer.Vector({
    source,
  })
  map.value.addLayer(layer)
  addPointEvent(map, source)
}
mitt.on('addEvent', addPoint)
onUnmounted(() => {
  mitt.off('addEvent', addPoint)
})
</script>

<style></style>
